<!-- 
滚动表格
调用方法：
<tScrollTable
  :table="_d.table"
  :paging="_d.paging"
  @next="getNext()">
  <template #bodyCell="{record, column}">
    <div v-if="column.dataIndex == 'actions'" class="flex justify-center items-center h-full w-full">
      <a @click="showVideo(record)">视频回顾<DoubleRightOutlined /></a>
    </div>
    <template v-else>{{record[column.dataIndex]}}</template> 
  </template>
</tScrollTable>
<script setup>
const _d = reactive({
	table: {
    head: [
      { title: "名称", dataIndex: "a1" },
      { title: "处置时长（分钟）", dataIndex: "a2" },
      { title: "到达时长（时间）", dataIndex: "a3" },
      { title: "操作", dataIndex: "actions" },
    ],
    data: [],
  },

  paging: {
    current: 1,
    pageSize: 15,
    total: 0,
  },
})
function search() {
  getData();
}
function getNext() {
  getData();
}
function getData() {
	xxx().then(res => {
		_d.paging.total = 100;
		_d.paging.data = res.data;
	})
}
</script>
 -->
<template>
  <div class="m-scroll-table">
		<div class="t-header"
			:style="{paddingRight: _d.headPr}">
			<div class="tr">
				<div v-for="(item, index) in props.table.head" :key="index" 
					class="td"
					:style="{width: item.width, flex: item.width ? 'auto' : '1'}">{{item.title}}</div>
			</div>
		</div>
		<div class="t-body">
			<div ref="scrollWrapperRef" class="scroll-wrapper" :style="{height: props.height}">
  			<div ref="scrollContentRef" class="scroll-content">
  				<div v-for="(aItem, aIndex) in props.table.data" :key="aIndex" class="tr">
  					<div v-for="(bItem, bIndex) in props.table.head" :key="bIndex" 
  						class="td"
  						:style="{width: bItem.width, flex: bItem.width ? 'auto' : '1'}"
  						:title="aItem[bItem.dataIndex]">
  						<template v-if="slots.bodyCell">
  							<slot name="bodyCell" :column="bItem" :record="aItem" :index="aIndex" :text="aItem[bItem.dataIndex]"></slot>
  						</template>
  						<template v-else>
  							{{aItem[bItem.dataIndex]}}
  						</template>
  					</div>
  				</div>
  				<div v-if="props.paging" class="table-tip">
	    			<template v-if="notEnd">
	    				<LoadingOutlined style="margin-right: 5px;" />
	    				正在加载中
	    			</template>
	    			<template v-else>{{props.paging.total ? '没有更多了' : '暂无数据'}}</template>
	    		</div>
  			</div>
  		</div>
		</div>
	</div>
</template>

<script setup>
import { reactive, ref, onMounted, useSlots, computed, watch } from 'vue'
import { LoadingOutlined } from '@ant-design/icons-vue';

const scrollWrapperRef = ref();
const scrollContentRef = ref();

const slots = useSlots();
const emits = defineEmits(['next']);
const props = defineProps({
	// 包裹成高度
	height: {
		type: String,
		default: '645px'
	},
	table: {
		type: Object,
		default: () => ({
			head: [],
			data: []
		})
	},
	// 如果返回false，表示不分页
	paging: {
		type: [Object, Boolean],
		default: () => ({
			current: 1,
	  	pageSize: 15,
	  	total: 0
		})
	}
})

const _d = reactive({
	headPr: 0
})

const notEnd = computed(() => {
	return props.paging ? props.paging.current*props.paging.pageSize<props.paging.total : false;
})

// 获取表格头部是否设置pdding-right
watch(() => props.table.data.length, () => {
	if(scrollContentRef.value && scrollWrapperRef.value) {
		setTimeout(() => {
			if(scrollContentRef.value && scrollWrapperRef.value) {
				_d.headPr = scrollContentRef.value.clientHeight > scrollWrapperRef.value.clientHeight ? '8px' : 0
			} else {
				_d.headPr = 0;
			}
			
		}, 100);
	}
}, {
	immediate: true
})

onMounted(() => {
oScroll.init()
})

// 滚动对象
const oScroll = {
	oWrapper: null,
	oContent: null,
	wrapperHeight: 0,
	init() {
		console.log('初始化');
		oScroll.oWrapper = scrollWrapperRef.value;
		if(!oScroll.oWrapper) {
			return;
		}
		oScroll.oContent = scrollContentRef.value;
		oScroll.wrapperHeight = oScroll.oWrapper.clientHeight;
		// 设置滚动事件
		let scrollTime = 0;
		oScroll.oWrapper.onscroll = (params) => {
			if(notEnd.value && oScroll.isScrollBottom(params.target.scrollTop)) {
				let currentTime = new Date().getTime();
				if(currentTime - scrollTime > 500) { // 0.5秒内只能触发一次
					scrollTime = currentTime;
					console.log('触发');
					emits('next');
				}
			}
		}
	},
	// 判断滚动是否触底
	isScrollBottom(scrollTop) {
		let contentHeight = oScroll.oContent.clientHeight;
		if(contentHeight - oScroll.wrapperHeight < scrollTop + 20) {
			return true;
		} else {
			return false;
		}
	}
}


//清空滚动高度
function clearH(){
	if(oScroll.oWrapper){
		oScroll.oWrapper.scrollTop = 0
	}
}

defineExpose({
	init: oScroll.init,
	clearH
})

</script>

<style lang="less" scoped>
.m-scroll-table {
	color: #fff;
	.t-header {
		.tr {
			background: #05314A;
		}
	}
	.t-body {
		.tr {
			margin-top: 10px;
			background: #07263B;
		}
	}
	.tr {
		display: flex;
		.td {
			flex: 1;
			line-height: 42px;
			padding: 0 16px;
			height: 42px;
			text-align: center;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
	}
}
.scroll-wrapper {
	height: 645px;
	overflow: auto;
}
.table-tip {
	margin-top: 5px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #aaa;
}
</style>